import { startOfWeek } from "date-fns";
import { formatDateRange } from "little-date";
import * as React from "react";
import type { DateRange } from "react-day-picker";
import { zhCN } from "react-day-picker/locale";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Calendar } from "../ui/calendar";

const events = [
  {
    title: "Team Sync Meeting",
    from: "2025-06-12T09:00:00",
    to: "2025-06-12T10:00:00",
  },
  {
    title: "Design Review",
    from: "2025-06-12T11:30:00",
    to: "2025-06-12T12:30:00",
  },
  {
    title: "Client Presentation",
    from: "2025-06-12T14:00:00",
    to: "2025-06-12T15:00:00",
  },
];

export function ReportsCalendar() {
  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
    from: startOfWeek(new Date()),
    to: new Date(),
  });

  return (
    <Card className="w-fit py-4">
      <CardContent className="px-4">
        <Calendar
          mode="range"
          defaultMonth={dateRange?.from}
          selected={dateRange}
          onSelect={setDateRange}
          locale={zhCN}
          className="p-0"
        />
      </CardContent>
      <CardFooter className="!pt-4 flex flex-col items-start gap-3 border-t px-4">
        <Select defaultValue={"pytest-template"}>
          <SelectTrigger className="w-full uppercase">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Tasks</SelectLabel>
              <SelectItem value="pytest-template">pytest-template</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <div className="flex w-full flex-col gap-2">
          {events.map((event) => (
            <div
              key={event.title}
              className="relative cursor-pointer rounded-md bg-accent/50 p-2 text-sm hover:bg-accent"
            >
              <div className="font-medium">{event.title}</div>
              <div className="text-muted-foreground text-xs">
                {formatDateRange(new Date(event.from), new Date(event.to))}
              </div>
            </div>
          ))}
        </div>
      </CardFooter>
    </Card>
  );
}
